<template>
  <section class="portfolio section" id="portfolio">
    <h2 class="section__title">{{ $t('portfolio__title') }}</h2>
    <span class="section__subtitle">{{ $t('portfolio__subtitle') }}</span>
    <swiper class="portfolio__container container swiper-container" :modules="modules" :slides-per-view="1"
            :space-between="30"
            :loop="true" :pagination="{ clickable: true }" navigation>
      <swiper-slide v-for="(item,index) in portfolioList" :key="index">
        <div class="portfolio__content grid swiper-slide">
          <img :src="item.img" alt="" class="portfolio__img"/>

          <div class="portfolio__right">
            <h3 class="portfolio__title" i18n="portfolio1__title">
              {{ $t(item.title) }}
            </h3>
            <p class="portfolio__description" i18n="portfolio1__description">
              {{ $t(item.describe) }}
            </p>
            <a :href="item.url" target="_blank"
               class="button button--flex button--small portfolio__button">
              Demo
              <i class="iconfont icon-arrowrightyoujiantou button__icon"></i>
            </a>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </section>
</template>
<script>
import {defineComponent, ref} from 'vue'
import {Pagination, Navigation} from 'swiper'
import {Swiper, SwiperSlide} from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation'

export default defineComponent({
  name: 'AppPortfolio',
  components: {
    Swiper,
    SwiperSlide
  },
  setup() {
    const portfolioList = ref([
      {
        url: 'https://ymf930.gitee.io/f-ui-one',
        title: 'portfolio1__title',
        describe: 'portfolio1__description',
        img: require('@/assets/img/portfolio1.jpg')
      },
      {
        url: 'https://ymf930.gitee.io/fei-admin',
        title: 'portfolio2__title',
        describe: 'portfolio2__description',
        img: require('@/assets/img/portfolio2.jpg')
      },
      {
        url: 'https://ymf930.gitee.io/fei-datav',
        title: 'portfolio3__title',
        describe: 'portfolio3__description',
        img: require('@/assets/img/portfolio3.jpg')
      },
      {
        url: 'https://ymf930.gitee.io/fei-editor',
        title: 'portfolio4__title',
        describe: 'portfolio4__description',
        img: require('@/assets/img/portfolio4.jpg')
      },
      {
        url: 'https://ymf930.gitee.io/fei-files',
        title: 'portfolio5__title',
        describe: 'portfolio5__description',
        img: require('@/assets/img/portfolio5.jpg')
      }
    ])
    return {
      modules: [Pagination, Navigation],
      portfolioList
    }
  }
})
</script>

<style lang="scss" scoped>
.portfolio {
  &__container {
    padding-bottom: 2.5rem;
    position: relative;
  }

  &__content {
    padding: 0 1.5rem;
    @include min-screen(568px) {
      grid-template-columns: repeat(2, 1fr);
    }
    @include min-screen(768px) {
      align-items: center;
    }
    @include min-screen(1024px) {
      column-gap: 5rem;
    }
  }

  &__img {
    width: 265px;
    border-radius: 0.5rem;
    justify-self: center;
    @include min-screen(768px) {
      width: 320px;
    }
  }

  &__right {
    padding: 0 20px;
  }

  &__title {
    font-size: var(--h3-font-size);
    margin-bottom: var(--mb-0-5);
  }

  &__description {
    margin-bottom: var(--mb-0-75);
  }

  &__button:hover .button__icon {
    transform: translateX(0.25rem);
  }
}
</style>
